React Fiber 架构：理解协调过程

React 以其基于组件的架构和声明式编程模型彻底改变了前端开发。React 效率的核心在于其协调过程——React 更新实际 DOM 以反映组件树中更改的机制。这个过程经历了显著的演变，最终形成了 Fiber 架构。本文全面介绍了 React Fiber 及其对协调的影响。

什么是协调？

协调是 React 用来比较之前的虚拟 DOM 和新的虚拟 DOM，并确定更新实际 DOM 所需的最小更改集的算法。虚拟 DOM 是 UI 的内存中表示。当组件的状态发生变化时，React 会创建一个新的虚拟 DOM 树。React 不直接操作实际 DOM（这是一个缓慢的过程），而是比较新的虚拟 DOM 树和之前的虚拟 DOM 树，并识别差异。这个过程称为差异化。

协调过程受两个主要假设的指导：

• 不同类型的元素将产生不同的树。
• 开发人员可以使用 key 属性提示哪些子元素在不同的渲染中可能保持稳定。

传统协调（Fiber 之前）

在 React 的最初实现中，协调过程是同步且不可分割的。这意味着一旦 React 开始比较虚拟 DOM 并更新实际 DOM 的过程，它就无法中断。这可能导致性能问题，尤其是在具有大型组件树的复杂应用程序中。如果组件更新花费很长时间，浏览器将变得无响应，从而导致糟糕的用户体验。这通常被称为“卡顿”问题。

想象一个展示产品目录的复杂电子商务网站。如果用户与过滤器交互，触发目录的重新渲染，同步协调过程可能会阻塞主线程，导致 UI 无响应，直到整个目录重新渲染。这可能需要几秒钟，导致用户沮丧。

介绍 React Fiber

React Fiber 是 React 协调算法的完全重写，在 React 16 中引入。其主要目标是提高 React 应用程序的响应速度和感知性能，尤其是在复杂场景中。Fiber 通过将协调过程分解为更小、可中断的工作单元来实现这一点。

React Fiber 背后的关键概念是：

• Fiber： Fiber 是一个 JavaScript 对象，表示一个工作单元。它包含有关组件、其输入和输出的信息。每个 React 组件都有一个对应的 Fiber。
• WorkLoop： WorkLoop 是一个循环，它遍历 Fiber 树并为每个 Fiber 执行必要的工作。
• 调度： 调度程序根据优先级决定何时开始、暂停、恢复或放弃工作单元。

Fiber 架构的优势

Fiber 架构提供了几个显著的优势：

• 可中断的协调： Fiber 允许 React 暂停和恢复协调过程，防止长时间运行的任务阻塞主线程。这确保了 UI 保持响应，即使在复杂更新期间也是如此。
• 基于优先级的更新： Fiber 使 React 能够对不同类型的更新进行优先级排序。例如，用户交互（如打字或点击）可以被赋予比后台任务（如数据获取）更高的优先级。这确保了最重要的更新首先被处理。
• 异步渲染： Fiber 允许 React 异步执行渲染。这意味着 React 可以开始渲染一个组件，然后暂停以允许浏览器处理其他任务，例如用户输入或动画。这提高了应用程序的整体性能和响应速度。
• 改进的错误处理： Fiber 在协调过程中提供了更好的错误处理。如果在渲染过程中发生错误，React 可以更优雅地恢复并防止整个应用程序崩溃。

考虑一个协作文档编辑应用程序。使用 Fiber，不同用户所做的编辑可以以不同的优先级进行处理。当前用户的实时打字获得最高优先级，确保即时反馈。来自其他用户或后台自动保存的更新可以以较低的优先级进行处理，从而最大限度地减少对活动用户体验的干扰。

理解 Fiber 结构

每个 React 组件都由一个 Fiber 节点表示。Fiber 节点包含有关组件的类型、属性、状态及其与其他 Fiber 节点在树中的关系的信息。以下是 Fiber 节点的一些重要属性：

• type： 组件的类型（例如，函数组件、类组件、DOM 元素）。
• key： 传递给组件的 key 属性。
• props： 传递给组件的 props。
• stateNode： 组件的实例（对于类组件）或 null（对于函数组件）。
• child： 指向第一个子 Fiber 节点的指针。
• sibling： 指向下一个兄弟 Fiber 节点的指针。
• return： 指向父 Fiber 节点的指针。
• alternate： 指向表示组件先前状态的 Fiber 节点的指针。
• effectTag： 一个标志，指示需要在 DOM 上执行的更新类型。

alternate 属性尤为重要。它允许 React 跟踪组件的先前状态和当前状态。在协调过程中，React 将当前 Fiber 节点与其 alternate 进行比较，以确定需要对 DOM 进行的更改。

WorkLoop 算法

WorkLoop 是 Fiber 架构的核心。它负责遍历 Fiber 树并为每个 Fiber 执行必要的工作。WorkLoop 被实现为一个递归函数，它一次处理一个 Fiber。

WorkLoop 包含两个主要阶段：

• 渲染阶段： 在渲染阶段，React 遍历 Fiber 树并确定需要对 DOM 进行的更改。此阶段是可中断的，这意味着 React 可以随时暂停和恢复它。
• 提交阶段： 在提交阶段，React 将更改应用于 DOM。此阶段不可中断，这意味着 React 必须在开始后完成它。

渲染阶段的详细信息

渲染阶段可以进一步细分为两个子阶段：

• beginWork： beginWork 函数负责处理当前的 Fiber 节点并创建子 Fiber 节点。它确定组件是否需要更新，如果需要，则为其子节点创建新的 Fiber 节点。
• completeWork： completeWork 函数负责在处理完当前 Fiber 节点的子节点后处理该节点。它更新 DOM 并计算组件的布局。

beginWork 函数执行以下任务：

1. 检查组件是否需要更新。
2. 如果组件需要更新，它会将新的 props 和 state 与之前的 props 和 state 进行比较，以确定需要进行的更改。
3. 为组件的子节点创建新的 Fiber 节点。
4. 设置 Fiber 节点上的 effectTag 属性，以指示需要在 DOM 上执行的更新类型。

completeWork 函数执行以下任务：

1. 使用在 beginWork 函数期间确定的更改更新 DOM。
2. 计算组件的布局。
3. 收集需要在提交阶段之后执行的副作用。

提交阶段的详细信息

提交阶段负责将更改应用于 DOM。此阶段不可中断，这意味着 React 必须在开始后完成它。提交阶段包含三个子阶段：

• beforeMutation： 此阶段在 DOM 被修改之前执行。它用于执行任务，例如准备 DOM 以进行更新。
• mutation： 此阶段是执行实际 DOM 修改的地方。React 根据 Fiber 节点的 effectTag 属性更新 DOM。
• layout： 此阶段在 DOM 被修改后执行。它用于执行任务，例如更新组件的布局和运行生命周期方法。

实用示例和代码片段

让我们用一个简化的示例来说明 Fiber 协调过程。考虑一个显示项目列表的组件：

```javascript function ItemList({ items }) { return (

{items.map(item => (
• {item.name}
))}

); } ```

当 items 属性更改时，React 需要协调列表并相应地更新 DOM。以下是 Fiber 将如何处理此问题：

1. 渲染阶段： beginWork 函数将比较新的 items 数组与之前的 items 数组。它将识别已添加、删除或更新的项。
2. 将为添加的项创建新的 Fiber 节点，并将 effectTag 设置为指示需要将这些项插入到 DOM 中。
3. 将标记要删除的已删除项的 Fiber 节点。
4. 更新已更新项的 Fiber 节点以及新数据。
5. 提交阶段： 然后，commit 阶段会将这些更改应用于实际 DOM。添加的项将被插入，删除的项将被删除，更新的项将被修改。

使用 key 属性对于高效的协调至关重要。如果没有 key 属性，React 将不得不在 items 数组更改时重新渲染整个列表。使用 key 属性，React 可以快速识别已添加、删除或更新的项，并且仅更新这些项。

例如，想象一个购物车中项目顺序发生变化的情况。如果每个项目都有一个唯一的 key（例如，产品 ID），React 可以高效地重新排序 DOM 中的项目，而无需完全重新渲染它们。这显着提高了性能，尤其是在大型列表中。

调度和优先级排序

Fiber 的主要优点之一是它能够调度和优先排序更新。React 使用调度程序来确定何时根据其优先级启动、暂停、恢复或放弃工作单元。这允许 React 优先处理用户交互，并确保 UI 保持响应，即使在复杂更新期间也是如此。

React 提供了几个 API，用于以不同的优先级调度更新：

• React.render：使用默认优先级调度更新。
• ReactDOM.unstable_deferredUpdates：使用较低优先级调度更新。
• ReactDOM.unstable_runWithPriority：允许您显式指定更新的优先级。

例如，您可以使用 ReactDOM.unstable_deferredUpdates 来调度对用户体验不关键的更新，例如分析跟踪或后台数据获取。

```javascript ReactDOM.unstable_deferredUpdates(() => { // 在此处执行非关键更新 updateAnalyticsData(); }); ```

使用 Fiber 处理错误

Fiber 在协调过程中提供了改进的错误处理。当渲染期间发生错误时，React 可以捕获错误并防止整个应用程序崩溃。React 使用错误边界以受控方式处理错误。

错误边界是一个组件，它捕获其子组件树中任何位置的 JavaScript 错误，记录这些错误，并显示回退 UI 而不是崩溃的组件树。错误边界捕获渲染期间、生命周期方法中以及它们下方整个树的构造函数中的错误。

```javascript class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError(error) { // 更新状态，以便下一次渲染将显示回退 UI。 return { hasError: true }; } componentDidCatch(error, errorInfo) { // 您还可以将错误记录到错误报告服务 logErrorToMyService(error, errorInfo); } render() { if (this.state.hasError) { // 您可以渲染任何自定义回退 UI return

出错了。

; } return this.props.children; } } ```

您可以使用错误边界来包装任何可能抛出错误的组件。这可确保您的应用程序保持稳定，即使某些组件发生故障。

```javascript ```

调试 Fiber

调试使用 Fiber 的 React 应用程序可能具有挑战性，但是有几种工具和技术可以提供帮助。React DevTools 浏览器扩展提供了一组强大的工具，用于检查组件树、分析性能和调试错误。

React Profiler 允许您记录应用程序的性能并识别瓶颈。您可以使用 Profiler 查看每个组件的渲染所需时间，并识别导致性能问题的组件。

React DevTools 还提供了一个组件树视图，允许您检查每个组件的 props、state 和 Fiber 节点。这对于理解组件树的结构以及协调过程的工作方式很有帮助。

结论

React Fiber 架构代表了对传统协调过程的重大改进。通过将协调过程分解为更小、可中断的工作单元，Fiber 使 React 能够提高应用程序的响应速度和感知性能，尤其是在复杂场景中。

了解 Fiber 背后的关键概念，例如 Fiber、WorkLoop 和调度，对于构建高性能 React 应用程序至关重要。通过利用 Fiber 的功能，您可以创建更具响应性、更具弹性的 UI，并提供更好的用户体验。

随着 React 的不断发展，Fiber 将仍然是其架构的基本组成部分。通过及时了解 Fiber 的最新发展，您可以确保您的 React 应用程序充分利用它提供的性能优势。

以下是一些关键要点：

• React Fiber 是 React 协调算法的完全重写。
• Fiber 允许 React 暂停和恢复协调过程，防止长时间运行的任务阻塞主线程。
• Fiber 使 React 能够优先处理不同类型的更新。
• Fiber 在协调过程中提供了更好的错误处理。
• key 属性对于高效的协调至关重要。
• React DevTools 浏览器扩展提供了一组强大的工具来调试 Fiber 应用程序。

通过拥抱 React Fiber 并理解其原则，世界各地的开发人员可以构建更高效、用户友好的 Web 应用程序，而不管其位置或项目的复杂性如何。